import React, {Component} from 'react';
import { Redirect } from 'react-router-dom';
import {connect} from 'react-redux';
import {actionCreators} from './store';

import {LoginWrapper, LoginBox, Input, Button} from './style';

class Login extends Component{
    constructor(props){
        super(props);
        this.account = React.createRef();
        this.password = React.createRef();
    }
    render(){
        const {loginStatus} = this.props;
        if(!loginStatus){
            return(
                <LoginWrapper>
                    <LoginBox>
                        <Input placeholder='账号' ref={this.account}/>
                        <Input placeholder='密码' type='password' ref={this.password}/>
                        <Button onClick={() => this.props.login(this.account, this.password)}>登录</Button>
                    </LoginBox>
                </LoginWrapper>
            )
        }else{
            return <Redirect to='/' />
        }

     
    }
}

const mapStateToProps = (state) => ({
    loginStatus: state.getIn(['login','login'])
})

const mapDispatchToProps = (dispatch) => ({
    login(account, password){
         dispatch(actionCreators.login(account.current.value,password.current.value))
    }
})

export default connect(mapStateToProps, mapDispatchToProps)(Login);